<template>
  <div style="margin: 15px">

    <h4 class="form-header">基本信息</h4>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="用户昵称" prop="nickName">
            <el-input v-model="form.nickName" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="登录账号" prop="userName">
            <el-input v-model="form.userName" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <h4 class="form-header">角色信息</h4>
    <el-table
        ref="multipleTable"
        :data="roles"
        :header-cell-style="style"
        tooltip-effect="dark"
        style="width: 100%;margin-top: 10px">
      <el-table-column align="center" type="selection" width="50">
      </el-table-column>
      <el-table-column align="center" prop="userId" label="序号" width="50">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column align="center" prop="roleId" label="角色编号">
      </el-table-column>
      <el-table-column align="center" prop="roleName" label="角色名称">
      </el-table-column>
      <el-table-column align="center" prop="roleKey" label="权限字符">
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间" width="160">
      </el-table-column>
    </el-table>

    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import axios from "axios";

const BASE_URL = "http://124.222.238.167/prod-api"
const TOKEN = "Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImI2YTgzOTVlLWIyY2QtNDJiMi1iYzQ2LWI4OGY5OGU0NmFlNiJ9.h3dSz2zOj5LHVxxwNLSDJdt_VBDwMucP31ZKE9mwyTE7cFmMZ2u7WL6JVOrMkIE8Lhqjnj9fhubpRgalEtcM8g"

export default {
  name: "UserAuthView",
  data() {
    return {
      form: {},
      roles: []
    }
  },
  created() {
    this.selectUserRole(this.$route.params.userId)
  },
  methods: {
    style() {
      return "background-color:RGB(248,248,249);color:RGB(81,90,110)"
    },
    selectUserRole(userId) {
      axios({
        url: BASE_URL + "/system/user/authRole/" + userId,
        method: 'get',
        headers: {
          Authorization: TOKEN
        }
      }).then(res => {
        this.form = res.data.user;
        this.roles = res.data.roles
      })
    },
    close() {
      this.$router.push('/system/user')
    },
    submitForm() {
      this.$message.error("功能暂未开发")
    }
  },

}
</script>

<style scoped lang="scss">
.form-header {
  font-size: 15px;
  color: #6379bb;
  border-bottom: 1px solid #ddd;
  margin: 8px 10px 25px 10px;
  padding-bottom: 5px;
  font-weight: normal;
}
</style>